<template>
	<div>
		<div class="schart-box" style="float: left">
			<div class="content-title">柱状图</div>
			<schart class="schart" canvasId="bar" :options="options1"></schart>
		</div>
		<div style="float: left">
			<div class="content-title">仪表盘</div>
			<div id="main" style="width: 500px; height: 500px;"></div>
		</div>
		<div>
			<div class="content-title">仪表盘</div>
			<div id="E" style="width: 500px; height: 500px;"></div>
		</div>
	</div>
</template>

<script>
	import Schart from 'vue-schart';
	import * as echarts from 'echarts';
	export default {
		name: "Echarts",
		components:{
			Schart,
		},
		data(){
			return{
				options1: {
					type: 'bar',
					title: {
						text: '最近一周各品类销售图'
					},
					bgColor: '#fbfbfb',
					labels: ['周一', '周二', '周三', '周四', '周五'],
					datasets: [
						{
							label: '家电',
							fillColor: 'rgba(241, 49, 74, 0.5)',
							data: [234, 278, 270, 190, 230]
						},
						{
							label: '百货',
							data: [164, 178, 190, 135, 160]
						},
						{
							label: '食品',
							data: [144, 198, 150, 235, 120]
						}
					]
				},
		}
		},
		methods:{
			Ec(){
		         var chartDom = document.getElementById('main');
				 var myChart = echarts.init(chartDom);
			     var option = {
					    tooltip: {
						 formatter: '{a} <br/>{b} : {c}%'
					  },
					series: [
						{
							name: 'Pressure',
							type: 'gauge',
							detail: {
								formatter: '{value}'
							},
							data: [
								{
									value: 50,
									name: 'SCORE'
								}
							]
						}
					]
				};
				myChart.setOption(option);
			},
			Ex(){
				var chartDom = document.getElementById('E');
				var myChart = echarts.init(chartDom);
				var option = {
					series: [
						{
							type: 'gauge',
							center: ['50%', '60%'],
							startAngle: 200,
							endAngle: -20,
							min: 0,
							max: 60,
							splitNumber: 12,
							itemStyle: {
								color: '#FFAB91'
							},
							progress: {
								show: true,
								width: 30
							},
							pointer: {
								show: false
							},
							axisLine: {
								lineStyle: {
									width: 30
								}
							},
							axisTick: {
								distance: -45,
								splitNumber: 5,
								lineStyle: {
									width: 2,
									color: '#999'
								}
							},
							splitLine: {
								distance: -52,
								length: 14,
								lineStyle: {
									width: 3,
									color: '#999'
								}
							},
							axisLabel: {
								distance: -20,
								color: '#999',
								fontSize: 20
							},
							anchor: {
								show: false
							},
							title: {
								show: false
							},
							detail: {
								valueAnimation: true,
								width: '60%',
								lineHeight: 40,
								borderRadius: 8,
								offsetCenter: [0, '-15%'],
								fontSize: 60,
								fontWeight: 'bolder',
								formatter: '{value} °C',
								color: 'auto'
							},
							data: [
								{
									value: 20
								}
							]
						},
						{
							type: 'gauge',
							center: ['50%', '60%'],
							startAngle: 200,
							endAngle: -20,
							min: 0,
							max: 60,
							itemStyle: {
								color: '#FD7347'
							},
							progress: {
								show: true,
								width: 8
							},
							pointer: {
								show: false
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							},
							axisLabel: {
								show: false
							},
							detail: {
								show: false
							},
							data: [
								{
									value: 20
								}
							]
						}
					]
				};
				setInterval(function () {
					const random = +(Math.random() * 60).toFixed(2);
					myChart.setOption({
						series: [
							{
								data: [
									{
										value: random
									}
								]
							},
							{
								data: [
									{
										value: random
									}
								]
							}
						]
					});
				}, 2000);
				myChart.setOption(option);
			}
		},
		mounted() {
			this.Ec();
			this.Ex();
		}
	}
</script>

<style scoped>
	.schart-box {
		display: inline-block;
		margin: 20px;
	}
	.schart {
		width: 600px;
		height: 400px;
	}
	.content-title {
		clear: both;
		font-weight: 400;
		line-height: 50px;
		margin: 10px 0;
		font-size: 22px;
		color: #1f2f3d;
	}
</style>